import {Meta} from "@storybook/addon-docs/blocks";

<Meta title="Widgets/Interactive Graph/Accessibility" />

# Interactive Graph Accessibility

The Interactive Graph widget is designed to be accessible for all users, including those using assistive technologies.

## Keyboard Navigation

-   Users can tab to the graph and interact with graph elements using the keyboard.
-   Arrow keys allow navigation and adjustment of points or shapes (if supported by the graph type).
-   `Enter` or `Space` may be used to select or activate interactive elements.
-   `Escape` can be used to exit or deselect elements.

## Screen Reader Support

-   The widget provides ARIA labels and descriptions via the `fullGraphAriaLabel` and `fullGraphAriaDescription` props.
-   Graph elements are described for screen readers, including coordinates and types of shapes.
-   Equation strings and graph state can be programmatically accessed and announced.

## Visible Labels and Markings

-   Axis labels and markings are visible and can be customized for clarity.
-   The widget supports visible labels for axes and graph elements, improving context for all users.

## Best Practices

-   Always provide meaningful `fullGraphAriaLabel` and `fullGraphAriaDescription` for context.
-   Use clear axis labels and ensure sufficient color contrast for markings and shapes.
-   Avoid using color as the only means of conveying information.
-   Ensure interactive elements are reachable and operable via keyboard.

## Additional Notes

-   The widget supports a variety of graph types (points, lines, polygons, angles, etc.), each with accessible defaults.
-   If you encounter accessibility issues, please report them to the team for improvement.
